<template>
  <div class="di" v-show="Store.isShowMenu">
      <el-menu
        class="el-menu-vertical-demo"
        :collapse="Store.isCollapse"
        router="true"
      >
        <el-menu-item index="/mainBox">
          <el-icon>
            <HomeFilled />
          </el-icon>
          <template #title>首页</template>
        </el-menu-item>
        <el-menu-item index="/mainBox/usercenter">
          <el-icon>
            <UserFilled />
          </el-icon>
          <template #title>个人中心</template>
        </el-menu-item>
     <el-sub-menu v-if="Store.NowLoginuser.type === 1" index="1">
          <template #title>
            <el-icon>
              <Avatar />
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              index=/mainBox/addUser >添加用户
              </el-menu-item>
            <el-menu-item index="/mainBox/userList">用户管理</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <MessageBox />
            </el-icon>
            <span>新闻管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/mainBox/Newadd">创建新闻</el-menu-item>
            <el-menu-item index="/mainBox/NewList"> 新闻列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Edit />
            </el-icon>
            <span>产品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/mainBox/Productadd">添加产品</el-menu-item>
            <el-menu-item index="/mainBox/ProductList">产品列表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu> 
      </el-menu>
    </div>

</template>

<script setup>
import { useStore } from "@/stores/counter.js";
import { computed, onMounted, ref, watch } from "vue";
const Store = useStore();

const windowWidth = computed(() => Store.Width);
Store.isCollapse = windowWidth.value < 1000;
  Store.isShowMenu = windowWidth.value >= 450;
  watch(windowWidth, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    Store.isCollapse = newValue < 1000;
    Store.isShowMenu = newValue >= 450;
  }
}, { immediate: true });
</script>

<style scoped>
/* 基础样式 */

/* 大屏幕样式 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: calc(100vh - 100px);
}

/* 小屏幕样式 */
@media (max-width: 450px) {
  .di {
    height: 80vh;
    position: absolute;
    top: 50px;
   
    z-index: 10;
  }

  
}

/* 中屏幕样式 */
@media (min-width: 450px) and (max-width: 1000px) {
  .di {
    height: 100vh;
  }

  .div1 {
    height: 100vh;
    background: white;
  }
}
</style>